<template>
  <div class="sidebar">
    <el-menu
      :default-active="onRoutes"
      class="el-menu-vertical-demo"
      :collapse="isCollage"
      unique-opened
      router
    >
      <h3 :class="isCollage === false ? 'logo':'islogo'">
        <img src="../../assets/logoLight.png" alt="">
      </h3>
      <template v-for="item in navData">
        <template v-if="item.children.length > 0">
          <el-submenu :index="item.menuId" :key="item.menuId">
            <template slot="title">
              <i :class="'iconfont ' + item.icon"></i>
              <span slot="title">{{ item.menuName }}</span>
            </template>
            <template v-for="subItem in item.children">
              <el-submenu
                v-if="subItem.children.length > 0"
                :index="subItem.url"
                :key="subItem.menuId"
              >
                <template slot="title">
                  <i :class="'iconfont ' + subItem.icon"></i>
                  <span slot="title">{{ subItem.menuName }}</span>
                </template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.children"
                  :key="i"
                  :index="threeItem.url"
                  >{{ threeItem.menuName }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-else-if="subItem.url === 'welldata'"
                :index="subItem.url+'/'+subItem.menuName"
                :key="subItem.menuId"
                @click="wellToggle(subItem)"
>
                <template slot="title">
                  <i :class="'iconfont ' + subItem.icon"></i>
                  <span slot="title">{{ subItem.menuName }}</span>
                </template>
              </el-menu-item>

              <el-menu-item
                v-else
                :index="subItem.url"
                :key="subItem.menuId"
>
                <template slot="title">
                  <i :class="'iconfont ' + subItem.icon"></i>
                  <span slot="title">{{ subItem.menuName }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.url" :key="item.menuId">
            <i :class="'iconfont ' + item.icon"></i>
            <span slot="title">{{ item.menuName }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
import templates from "../../views/set/templates/templates.vue";
export default {
  components: { templates },
  computed: {
    //折叠按钮
    isCollage() {
      return this.$store.state.isCollapse;
    },
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
    navData(){
     return this.$store.state.navData;
    }
  },
  data() {
    return {
    };
  },
  methods: {
    wellToggle(subItem) {
      this.$router.push({name:subItem.url,query: {menuName:subItem.menuName}})
    }
  }
};
</script>
 
<style lang='less' scoped>
.sidebar {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: scroll;
  background-color: #0F1D36;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar > ul {
  height: 100%;
}

.el-menu {
  border-right-width: 0;
}
.el-menu h3 {
  text-align: center;
  line-height: 48px;
  padding-bottom: 7px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
  margin-right: 15px;
}
.el-aside .sidebar .el-menu-vertical-demo>li,.el-aside .sidebar .el-menu-vertical-demo>li>.el-submenu__title>span{
  font-size: 14px;
}
.el-aside .sidebar .el-menu-vertical-demo>li>span,.el-aside .sidebar .el-menu-vertical-demo>li>.el-submenu__title>span{
  padding-left: 8px;
}
.el-aside .sidebar .el-menu-vertical-demo>li>.el-menu--inline>li>span{
  padding-left: 6px;
  font-size: 14px;
}
.el-aside .sidebar .el-menu-vertical-demo .el-menu-item:hover span{
  font-weight: bold;
}
.icon-circle{
  font-size: 8px;
}
.logo img{
  width: 154px;
  height: 40px;
}
.islogo img{
  width: 65px;
  height: 20px;
}
</style>